<template>
    <div class="operat" v-loading="loading">
        <!-- 1 Synced -->
        <!-- 2 Sync failure -->
        <!-- 3 Draft -->
        <!-- 4 To be update -->
        <!-- 5 Ignore -->
        <!-- 6 synchronizing -->
        <template v-if="store.shop_type == 5">
            <button @click="doViewStore(product)" v-if="product.status == 1">Check in store</button>
            <!-- <button @click="syncProduct(product)" v-if="product.status == 2">Sync again</button> -->
            <!-- <button @click="editProduct(product, 'resave')" v-if="product.status == 3">Editing</button> -->
            <!-- <button @click="syncProduct(product)" v-if="product.status == 2">Sync Again</button> -->
            <button :disabled="store.shop_state == 2" @click="editProduct(product, 'resave')" v-if="product.status == 3">Editing</button>
            <!-- <button @click="syncProduct(product)" v-if="product.status == 4">Update</button> -->
            <!-- <button v-if="product.status == 5">Un-ignore</button> -->
            <button @click="openBranding()">Branding</button>

            <!-- <el-popover placement="top" :open-delay="200" trigger="hover" :ref="'popover-' + product.id"> -->
            <UxPopper placement="top" :offset="[6, 6]">
                <button><i class="iconfont icon-gengduodingdanguanli"></i></button>
                <div class="table-more" slot="pop">
                    <button @click="routeToBuy(product)">Order</button>
                    <!-- <button v-if="productStatus != 3" @click="editProduct(product, 'detail')">Edit description</button> -->
                    <!-- <button v-if="productStatus != 3" @click="editProduct(product, 'price')">Edit price</button> -->
                    <!-- <button @click="removeCheck(product)">Delete</button> -->
                    <StoreOperatRemove :item="product" @reload="$emit('update')" />
                </div>
            </UxPopper>
        </template>
        <template v-else>
            <button @click="doViewStore(product)" v-if="product.status == 1">Check in store</button>
            <button :disabled="store.shop_state == 2" @click="syncProduct(product)" v-if="product.status == 2">Sync again</button>
            <button :disabled="store.shop_state == 2" @click="editProduct(product, 'resave')" v-if="product.status == 3">Editing</button>
            <button :disabled="store.shop_state == 2" @click="syncProduct(product)" v-if="product.status == 4">Update</button>
            <button v-if="product.status == 5">Un-ignore</button>
            <button @click="openBranding()">Branding</button>
            <!-- <el-popover placement="top" :open-delay="200" trigger="hover" :ref="'popover-' + product.id"> -->
            <UxPopper placement="top" :offset="[6, 6]" :close-on-click="true">
                <button><i class="iconfont icon-gengduodingdanguanli"></i></button>

                <div class="table-more" slot="pop">
                    <button @click="routeToBuy(product)">Order</button>
                    <button :disabled="store.shop_state == 2" v-if="productStatus != 3" @click="editProduct(product, 'detail')">Edit description</button>
                    <button :disabled="store.shop_state == 2" v-if="productStatus != 3" @click="editProduct(product, 'price')">Edit price</button>
                    <StoreOperatRemove :item="product" @reload="$emit('update')" />
                    <!-- <button @click="removeCheck(product)">Delete</button> -->
                </div>
            </UxPopper>
        </template>

        <!-- 下单选择订单类型 -->
        <UserMakeOrder v-model="order" />

        <!-- 增值服务弹窗 -->
        <BrandingBindProduct v-model="branding" v-if="branding" source="shop" @update="$emit('update')" />

        <!-- 删除弹窗 -->

    </div>
</template>

<script>
export default {
    name: "StoreOperat",
    props: {
        product: { type: Object, default: {} },
        stores: { type: Array, default: [] },
        store: { type: Object, default: {} },
    },
    data () {
        return {
            loading: false,
            order: null,
            remove: null,
            popperShow: false,
            branding: null,
        };
    },
    computed: {
        productStatus: {
            get () {
                let product = this.product || {};
                let status = product.status || "";
                return status;
            },
        },
    },
    methods: {
        // 打开增值服务弹窗
        openBranding () {
            this.branding = this.product;
        },

        // 包装和领表是否改动
        brandingDialogClose (change) {
            this.branding = null
            if (change) {
                this.$emit('update')
            }
        },

        //跳转到商店
        async doViewStore (product) {
            let opener = window.open("about:blank");
            let store =
                this.stores.filter((item) => item.id == product.store_id)[0] ||
                {};
            //店铺id 商品id
            let resdata = {
                shop_name: store.shop_name,
                product_id: product.id,
            };

            if (store.shop_name) {
                let res = await this.$http("UserStore.getInStoreUrl", resdata);
                if (res.code == 0) {
                    //打开店铺页
                    opener && (opener.location = res.data);
                    this.loading = false;
                } else {
                    this.loading = false;
                    this.$uxMessage.error(res.msg || "error");
                    opener && opener.close();
                }
            } else {
                this.$uxMessage.error("Shop name not found");
                opener && opener.close();
            }
        },

        // 同步商品到第三方平台
        async syncProduct (product) {

            if (product.loading) {
                return;
            }

            product.loading = true;

            // const store = this.stores.filter((item) => item.id == product.store_id)[0] || {};
            // const shopname = {
            //     '1': 'shopify',
            //     '2': 'etsy',
            //     '3': 'wix'
            // };
            // const name = shopname[store.shop_type] || 'store online'
            const res = await this.$http("UserStore.syncProduct", product.id);
            if (res.code == 0) {
                product.status = 6;
                this.$emit('getStatus');
                // this.$uxMessage.success("Your product is being synced to " + name);
            } else {
                product.loading = false;
                this.$uxMessage.error("Failed to sync product");
            }
        },


        // 去购买
        routeToBuy (product) {
            // 先选择订单类型
            this.order = (product.data || []).map(item => {
                return {
                    spu: item.spu, //商品的SPU用于确认SKU
                    title: item.title, //标题
                    model_img: item.model_img || [],
                    design_list: item.design_info, //设计信息
                    source: "shop", //商品来源
                    design_id: item.design_id, //商品来源
                    extra_price: item.extra_price, // 设计面价格
                    is_blank: item.is_blank, // 空白模板
                    color_base: '',
                    tag_design_info: product.tag_design_info, // 吊牌
                    pack_design_info: product.pack_design_info // 包装
                };
            })
        },

        // 编辑
        editProduct (product, action) {
            let store = this.stores.filter((item) => item.id == product.store_id)[0] || {};
            this.$router.push({
                path: "/synchronize",
                query: {
                    goodsid: product.id,
                    shopid: store.id,
                    action: action,
                },
            });
        },
    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.disnone {
    display: none !important;
    opacity: 0 !important;
}
.operat {
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    button {
        width: 120px;
        height: 36px;
        & + button {
            margin-top: 14px;
        }
    }
}

.popper {
    margin-top: 14px;

    &::v-deep {
        .popper-name {
            & > button {
                width: 120px;
                height: 36px;
                i {
                    font-size: 24px;
                }
            }
        }
        .popper-content {
            background: #ffffff;
            box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
            border-radius: 8px;
            border: 1px solid #ebebeb;
        }
        .arrow {
            display: none;
        }
    }
    .table-more {
        display: flex;
        flex-direction: column;
        padding: 6px;
        button {
            border: none;
            background: none;
            margin: 0;
            width: 168px;
            height: 34px;
            box-sizing: border-box;
            padding: 0 8px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            justify-content: flex-start;

            &:hover {
                background: #f6f6f6;
                color: #000;
            }

            &[disabled] {
                color: #b8b8b8;
                &:hover {
                    background: none;
                }
            }
        }
    }
}

.dialog-warp {
    width: 320px;
    height: 372px;
    box-sizing: border-box;
    padding: 20px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 12px 0;
        text-align: center;

        i {
            width: 72px;
            height: 72px;
            background: #fff4f3;
            border-radius: 72px;
            line-height: 72px;
            font-size: 34px;
            text-align: center;
            color: #f44336;
        }
        strong {
            margin-top: 18px;
            font-size: 16px;

            color: #000000;
            line-height: 18px;
        }

        span {
            margin-top: 12px;
            font-size: 12px;

            color: #999;
            line-height: 18px;
        }

        input {
            margin-top: 8px;
            width: 400px;
            height: 32px;
            box-sizing: border-box;
            padding: 7px 8px;
            line-height: 18px;
            font-size: 14px;

            font-weight: 400;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
        }
    }

    button {
        width: 100%;
        margin-top: 18px;
        height: 40px;
        min-height: 40px;
    }
}

.dialog-forbid {
    p {
        i {
            background: none;
            font-size: 60px;
            color: #ddd;
        }
        strong {
            text-align: center;
            line-height: 24px;
        }
    }
}

.dialog-remove p {
    margin: 0;
}
</style>
